<template>
  <div>
    <div id="preload-01"></div>
    <div class="setting-title" style="color:#000;position: relative;z-index: 99;background: #fff">
      <img src="../assets/logo.png" style="width:440px"/>
      <div class="userinfo">
         <span style="cursor: pointer">大融</span>
         <span style="padding:0 5px">|</span>
         <span style="cursor: pointer;text-decoration: underline">退出</span>
         <span style="padding:0 15px;cursor: pointer"><i class="el-icon-question" style="font-size: 18px"></i> HELP</span>
      </div>
    </div>
    <div style="height:calc(100vh - 50px);overflow: hidden;width: 100vw;" ref="secenZoom" >
      <panZoom ref="panZoom" @init="onInit" :key="refreshKey" @transform="onPanEnd" selector=".zoomable">
        <div class="dron-main-div zoomable" ref="innerBox" style="width:1500px;height:644px">
          <div class="dron-bg-div" style="width:1500px;height:644px" >
            <img src="https://pic.moresu.com/Fh5Qyo9-zTsY-bARjAwCfbIm5aHC" style="width:1500px;height:644px">
          </div>
          <div class="label-div-point">
              <div class="label-red" ref="point0" style="cursor:pointer;background: none;position: absolute;top: 305px; left: 1128px; width: 11px;height: 23px;z-index: 3;" @click="showpopfn(0, 'point0')"></div>
              <div class="label-red" ref="point1" style="cursor:pointer;background: none;position: absolute;top: 394px;left: 999px;width: 11px;height: 22px;z-index: 3;" @click="showpopfn(1, 'point1')"></div>
              <div class="label-red" ref="point2" style="cursor:pointer;background: none; position: absolute; top: 422px; left: 773px; width: 11px;height: 22px;z-index: 3;" @click="showpopfn(2, 'point2')"></div>
              <div class="label-red" ref="point3" style="cursor:pointer;background: none;  position: absolute; top: 418px; left: 656px; width: 11px;height: 22px;z-index: 3;" @click="showpopfn(3, 'point3')"></div>
              <div class="label-red" ref="point4" style="cursor:pointer;background: none;  position: absolute; top: 222px; left: 680px; width: 11px;height: 22px;z-index: 3;" @click="showpopfn(4, 'point4')"></div>
              <div class="label-red" ref="point5" style="cursor:pointer;background: none;  position: absolute; top: 358px; left: 535px; width: 11px;height: 22px;z-index: 3;" @click="showpopfn(5, 'point5')"></div>
              <div class="label-red" ref="point6" style="cursor:pointer;background: none;  position: absolute; top: 433px; left: 403px; width: 11px;height: 22px;z-index: 3;" @click="showpopfn(6, 'point6')"></div>
          </div>
        </div>
      </panZoom>
       <div class="point-qz-div">
           <div class="point-div" v-for="(item,index) in dataList" :key="index" :ref="'qz'+index" :style="{top:item.py+'px',left:item.px+'px'}" @click="showpopfn(index, 'point'+index)">0{{index+1}}</div>
       </div>
      <div class="point-pop" v-show="showpop" :style="{left:x+'px',top:y+'px'}">
        <div class="pop-title">No.0{{ cunIndex+1 }} 热斑 <div class="pop-closed" @click="showpop=false;cunIndex = -1"><i class="el-icon-close" style="font-size: 20px"></i></div></div>
        <div class="pop-subtitle">位置：{{popData.text}}</div>
        <div class="pop-subtitle">经纬度：{{ popData.lng }}，{{ popData.lat }}</div>
        <div class="pop-img">
          <el-image
                  :key="index"
                  v-for="(item,index) in popData.list"
                  style="width: 240px; height: 240px"
                  :src="item"
                  :preview-src-list="popData.list">
          </el-image>
        </div>
      </div>
      <div class="right-tool-div">
        <div class="tool-title">
          电站巡检
          <i class="el-icon-minus" style="float:right;font-size:20px;font-weight: bold;cursor: pointer" @click="show=!show"></i>
        </div>
        <div class="tool-con" v-show="show">
          <el-descriptions title="" :column="1" style="width:100%" content-class-name="my-content" label-class-name="my-label" :colon="false">
            <el-descriptions-item label="项目单位">
              国家电网常州供电公司青龙支撑创新基地
            </el-descriptions-item>
            <el-descriptions-item label="项目地址">江苏省常州市天宁区青洋北路157号-1</el-descriptions-item>
            <el-descriptions-item label="经纬度">东经120.031047°/北纬31.814241°</el-descriptions-item>
            <el-descriptions-item label="装机容量"><span style="font-weight: bold;color:rgb(27,64,146);font-size:16px">255</span> kw</el-descriptions-item>
            <el-descriptions-item label="组件数量"><span style="font-weight: bold;color:rgb(27,64,146);font-size:16px">567</span> 块</el-descriptions-item>
          </el-descriptions>
          <div class="line-div"></div>
          <el-descriptions title="" :column="1" style="width:100%" content-class-name="my-content" label-class-name="my-label" >
            <el-descriptions-item label="上次巡检时间">2023-10-12 9:00~10:00</el-descriptions-item>
            <el-descriptions-item label="发现疑似问题"><span style="font-weight: bold;color:red;font-size:16px">7 </span> 处</el-descriptions-item>
          </el-descriptions>
          <div class="err-list" style="height:180px;overflow-y: auto">
             <div class="err-item" @click="changeIndex(index)" :class="{'choose':cunIndex == index}" v-for="(item,index) in dataList" :key="index">
                 <div class="name"><span class="num">0{{ index+1 }}</span><span class="name">{{item.name}}</span></div>
                 <div class="info">{{ item.text }}<i class="el-icon-arrow-right"></i></div>
             </div>
          </div>
        </div>
      </div>
      <div class="btn-div">
        <div class="btn-item" @click="reset"><img src="../assets/reset.png"/></div>
        <div class="btn-list">
            <div class="list-item" @click="change('add')"><i class="el-icon-circle-plus" style="font-size: 26px;color:rgb(99,99,99)"></i></div>
            <div class="list-item" @click="change('j')"><i class="el-icon-remove" style="font-size: 26px;color:rgb(99,99,99)"></i></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'droneInspection',
  data() {
    return {
      zoom:1,
      elmId:null,
      elm:null,
      refreshKey:0,
      show:true,
      cunIndex:-1,
      x:0,
      y:0,
      px:0,
      py:0,
      showpop:false,
      transform:{},
      dataList:[
          {name:'故障',px:0,py:0,lng:31.810630725370878,lat:120.02160408583309,list:['https://pic.moresu.com/FqtqTyj9qwe4hPTKdssFgwmy654h','https://pic.moresu.com/FqdBazH_0Zw7MQFy6t-SrB6OLW4w'],text:'第2排、第1行、第74列'},
          {name:'热斑',px:0,py:0,lng:31.810543294385738,lat:120.02144984410887,list:['https://pic.moresu.com/Fo2lHv7Vszu9xBEOgKoPqcutaqtj','https://pic.moresu.com/FrOhTTNK3PwbBuUeNGMCQFcT6WXm'],text:'第3排、第2行、第63列'},
          {name:'热斑',px:0,py:0,lng:31.810510788062096,lat:120.02121318495837,list:['https://pic.moresu.com/FmW3jazzPYrznZdqHASlHzNPgHLr','https://pic.moresu.com/FoxI8qX6ed-jcPJKFVzjBuX6KABs'],text:'第4排、第1行、第44列'},
          {name:'热斑',px:0,py:0,lng:31.81051096689749,lat:120.02108285636886,list:['https://pic.moresu.com/FgLWYre2DcVOwypkWE9k8muCtsM0','https://pic.moresu.com/Fv6YBnIaJtU7AZCaqSXLL2YWpGhH'],text:'第4排、第4行、第33列'},
          {name:'热斑',px:0,py:0,lng:31.81069715545732,lat:120.02110312931515,list:['https://pic.moresu.com/FtfbeWmqEHTxLk6KABCirB_CDHQT','https://pic.moresu.com/FsZIl8k75a_kQ9DcmEe2aVqTv_BQ'],text:'第1排、第1行、第35列'},
          {name:'热斑',px:0,py:0,lng:31.81056564672112,lat:120.02094687440055,list:['https://pic.moresu.com/FvB2PFrXSES8mclQt1oBx326beWy','https://pic.moresu.com/FuQjVvMWijglBbDk8Yl8nmHUVsdK'],text:'第3排、第1行、第22列'},
          {name:'热斑',px:0,py:0,lng:31.8104905650567,lat:120.02080252535347,list:['https://pic.moresu.com/Fv-JzQryen3SzYuv4TdwWH--bHD1','https://pic.moresu.com/Fh3brFuUF81lL04WEcU35IIBrTuU'],text:'第4排、第2行、第11列'},

      ],
      popData:{}
    }
  },
  watch:{
  },


  methods: {
    showpopfn(index,name){
      this.cunIndex = index;
      this.showpop = true;
      console.log("name",name)
      let rect = this.$refs[name].getBoundingClientRect();
      this.x = rect.x+this.transform.scale*11
      this.y = rect.y
      this.popData = this.dataList[index]


    },
    changeIndex(index){
      if(this.cunIndex == index){
        this.cunIndex = -1
        this.showpop = false
      }else{
        this.cunIndex = index
        this.showpopfn(index,'point'+index)
      }
    },
    onPanEnd(t){
      console.log(t.getTransform())
      this.transform = t.getTransform()
      let index = this.cunIndex == -1 ? 0 :this.cunIndex
      let name1 = 'point' + index
      if (this.$refs[name1]){
        let rect = this.$refs[name1].getBoundingClientRect();
        this.x = rect.x+(this.transform.scale*11)
        console.log("rect.x",rect.x)
        console.log("this.x",this.x)
        this.y = rect.y
           this.dataList.forEach((el,index)=>{
             let c = JSON.parse(JSON.stringify(el))
             let name = 'point'+index
             let name2 = 'qz'+index
             let ect = this.$refs[name].getBoundingClientRect();
             let qct = this.$refs[name2][0].getBoundingClientRect();
             // console.log("getTransform",e.getTransform())
             // let transform = e.getTransform()
             // console.log("qct",qct)
             c.px = ect.x ;
             c.py = ect.y-qct.height;
             this.dataList.splice(index,1,c)
           })
      }

    },
    onInit(t,t1){
      this.elm = t;
      console.log("t",t)
      this.elmId = t1;
      let transform = this.elm.getTransform();
      console.log("transform",transform)
      console.log("panZoom",this.$refs.panZoom.$el)
      console.log("innerBox",this.$refs.innerBox)
      let srect = this.$refs.secenZoom.getBoundingClientRect();
      let rect = this.$refs.innerBox.getBoundingClientRect()
      let cx = srect.x + srect.width/2;
      let cy1 = srect.y + srect.height/2;
      let cy2 = rect.y + (rect.height*transform.scale)/2;
      let cy = cy1 < cy2 ? cy1 :cy2
      // let zoomw =  srect.width/(rect.width*transform.scale)
      // let zoomh =  srect.height/(rect.height*transform.scale)
      console.log("cy1",cy1)
      console.log("cy2",cy2)
      console.log("cy",cy)
      // console.log("zoomw",zoomw)
      // console.log("zoomh",zoomh)
      // let zoom = zoomw>zoomh ? zoomw:zoomh;
      console.log("srect",srect)
      console.log("rect",rect)

      this.elm.smoothZoom(cx, cy, 2);
      // this.$nextTick(()=>{
      //   let my = transform.y
      //   if(srect.height+transform.y*zoomh > srect.height){
      //     my = (srect.height - srect.height+transform.y*zoom + transform.y*zoomh)*zoomh
      //   }
      //   console.log("rect.height*transform.scale+transform.y",rect.height+transform.y*zoomh)
      //   console.log("srect.height",srect.height)
      //   console.log("transform.y",transform.y)
      //   console.log("my",my)
      //   this.elm.smoothMoveTo(transform.x,my)
      // })
    },

    change(type){
      if(type == 'add'){
        this.zoom = 1.2
      }else if(type == 'j'){
        this.zoom = 0.8
      }
      let rect = this.$refs.innerBox.getBoundingClientRect()
      let cx = rect.x + rect.width/2;
      let cy = rect.y + rect.height/2;
      this.elm.smoothZoom(cx, cy, this.zoom);
    },
    reset(){
      this.refreshKey++
    },
  },

  created() {

  }
}
</script>

<style lang="less">

    body {
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden;
    }

::selection {
  background-color: transparent;
}
*{
  padding:0;
  margin:0
}
#preload-01 { background: url(https://pic.moresu.com/Fh5Qyo9-zTsY-bARjAwCfbIm5aHC) no-repeat -9999px -9999px; }
.point-div{
    position: absolute;
    box-sizing: border-box;
    display: block;
    background: url("../assets/qi.png") no-repeat;
    background-size: contain;
    width:28px;
    height:28px;
    color:#fff;
    padding-left:7px;
    padding-top: 4px;
    font-size: 12px;
    cursor: pointer;
}
.point-pop{
  position: fixed;
  box-sizing: border-box;
  padding:10px;

  background: rgb(245,219,219);
  width:512px;
  z-index: 4;
  border-radius: 5px;
  .pop-closed{
    float: right;
    margin-top:0;
    margin-right:0;
    cursor: pointer;
    color:#000;
  }
  .pop-title{
    color:Red;
    font-size: 16px;
    font-weight: bold;
  }
  .pop-subtitle{
    font-size:12px;
    color:rgb(70,70,70);
    margin-top:5px
  }
  .pop-img{
    margin-top:10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.btn-div{
  position: fixed;
  bottom:10px;
  right:10px;
  .btn-item{
    width:48px;
    height:48px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .btn-list{
    margin-top:10px;
    width:48px;
    height:96px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    .list-item{
      height:48px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }

}
.setting-title{
 display: flex;
  align-items: center;
  justify-content: space-between;
  height:50px;
  padding:0 12px;
  .userinfo{
    font-size:14px;
    color:rgb(87,87,87)
  }

}
.right-tool-div{
  box-sizing: border-box;
  width:360px;
  position: fixed;
  top:120px;
  right:20px;
  background: rgb(244,244,244);
  z-index: 99;
  .tool-title{
    background: rgb(234,233,233);
    padding:12px;
    font-size:16px;
    color:rgb(70,70,70)
  }
  .tool-con{
    padding:12px;
    .err-list{
      .err-item:first-child{
        margin-top:0
      }
      .err-item.choose{
        background: rgb(245,219,219);
      }
      .err-item{
        cursor: pointer;
        border-radius: 5px;
        padding:12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgb(230,230,230);
        margin-top:12px;
        .name{
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          color:#000;
          font-size:14px;
          .num{
            box-sizing: border-box;
            display: block;
            background: url("../assets/qi.png") no-repeat;
            background-size: contain;
            width:28px;
            height:28px;
            color:#fff;
            padding-left:7px;
            padding-top: 4px;
            font-size: 12px;
          }
          .name{
            margin-left:2px
          }
        }
        .info{
          font-size:12px;
        }
      }
    }
    .el-descriptions__body{
      background: none;
    }
    .line-div{
      height:12px;
      border-top:1px dashed #bbb
    }
    .my-content{
      text-align: right;
      width:100%;
      display:block;
      color:rgb(75,75,75);
    }
    .my-label{
      font-weight: bold;
      color:#000
    }
  }
}
.dron-main-div{
  display: inline-block;
  position: relative;
  .dron-bg-div{
    position: relative;
    z-index: 0;
  }
    .label-div-point{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index: 1;
    }
  .label-div-list{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 1;
    .line-div{
      margin-left: 116px;
      margin-top: 119px;
      width: 146px;
      height: 815px;
      border: 3px solid rgb(0,122,255);
      position: relative;
      float:left;
      .point-div{
        position: absolute;
        box-sizing: border-box;
        display: block;
        background: url("../assets/qi.png") no-repeat;
        background-size: contain;
        width:28px;
        height:28px;
        color:#fff;
        padding-left:7px;
        padding-top: 4px;
        font-size: 12px;
        cursor: pointer;
        top:238px;
        left:78px;
      }
      .point-pop{
        position: absolute;
        box-sizing: border-box;
        padding:10px;
        top:270px;
        left:88px;
        background: rgb(245,219,219);
        width:512px;
        z-index: 4;
        border-radius: 5px;
        .pop-closed{
          float: right;
          margin-top:0;
          margin-right:0;
          cursor: pointer;
          color:#000;
        }
        .pop-title{
          color:Red;
          font-size: 16px;
          font-weight: bold;
        }
        .pop-subtitle{
          font-size:12px;
          color:rgb(70,70,70);
          margin-top:5px
        }
        .pop-img{
          margin-top:10px;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
        }
      }
    }
    .line-div:before{
      content: '区域1';
      position: absolute;
      background: rgb(0,122,255);
      color:#fff;
      font-size:14px;
      padding:4px 8px;
      top:-27px;
      left:-4px;
    }
    .num2.line-div{
      margin-left: 6px;
      margin-top: 119px;
      width: 288px;
      height: 815px;
      .point-div{
        top:406px;
        left:30px;
      }
      .point-pop {
        top: 432px;
        left: 38px;
      }
    }
    .line-div.num2:before{
      content: '区域2';
    }
    .num3.line-div{
      margin-left: 6px;
      margin-top: 119px;
      width: 284px;
      height: 815px;
      .point-div{
        top:35px;
        left:5px;
      }
      .point-pop {
        top: 61px;
        left: 13px;
      }
    }
    .line-div.num3:before{
      content: '区域3';
    }
    .num4.line-div{
      margin-left: 6px;
      margin-top: 119px;
      width: 284px;
      height: 815px;
      .point-div{
        top:604px;
        left:65px;
      }
      .point-pop {
        top: 265px;
        left: -26px;
      }
    }
    .line-div.num4:before{
      content: '区域4';
    }
    .num5.line-div{
      margin-left: 6px;
      margin-top: 119px;
      width: 144px;
      height: 815px;
    }
    .line-div.num5:before{
      content: '区域5';
    }

  }
}

</style>




